<template>
	<view>
		<view class="login-title">密码登录</view>
		
		<view class="login-content">
			<u-form :model="form" ref="uForm">
				<u-form-item prop="username">
					<u-input v-model="form.username" placeholder="请输入手机号" maxlength="11" :trim="true" />
				</u-form-item>
				<u-form-item prop="password">
					<u-input type="password" placeholder="请输入密码" v-model="form.password" maxlength="20" :trim="true" />
				</u-form-item>
				<view class="grey margin-top30 font24">忘记密码了？<text class="blue" @click="openPage('/login/retrieve-password')">去找回</text></view>
				<MyBtn title="立即登录" @click="formSubmit"></MyBtn>
			</u-form>
			<view class="grey margin-top60 font24 u-text-center">还没有账号？<text class="blue" @click="openPage('/login/register')">去注册账号</text></view>
		</view>
		<Footer @checkedClick="checkedClick"></Footer> 
	</view>
</template>		
 	
<script>
import Footer from './common/footer.vue'  //底部通用
import { sendCode,passwordLogin } from '@/api/login.js'

export default {
	components:{
		Footer
	},
	data() {
		return {
			// 发送验证码和协议
			code: '',
			codeText: '',
			// form
			form: {
				username:'',
				password:''
			},
			rules: {
				username: [
					{
						required: true,
						message: '请填写手机号',
						trigger: ['change','blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change','blur'],
					}
				],
				password: [
					{
						required: true,
						message: '请填写密码',
						trigger: ['change','blur']
					},
					{
						min: 6,
						message: '密码不能少于6位数',
						trigger: 'change'
					}
				]
			},
			loginChecked: false
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);  //验证初始化
	},
	methods: {
		// 登录协议-接收子组件
		checkedClick(meass){
			this.loginChecked = meass;
		},
		// 跳转页面
		openPage(url){
			this.$utils.navigateTo(url);
		},
		// 发送验证码
		codeChange(text) {
			this.codeText = text;
		},
		getCode() {
			if( !this.$u.test.mobile(this.form.username) ){
				uni.showToast({
				    title: "请输入正确的手机号码！", 
				    icon:"none"
				});
				return false;
			};
			if(this.$refs.uCode.canGetCode) {
				sendCode({
					mobile: this.form.username
				}).then(res=>{
					uni.showToast({
						title: "发送成功，请注意短信查收！", 
						icon:"none"
					});
				}).catch(err=>{
					uni.showToast({
						title:err,
						icon:'none'
					})
				});
				setTimeout(() => {
					uni.hideLoading();
					this.$refs.uCode.start();
				}, 1000);
			}else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		// 提交登录
		formSubmit(){
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if( !this.loginChecked ){
						uni.showToast({
							title: '请您先同意用户协议！',
							icon:'none'
						});
						return false;
					};
					passwordLogin(this.form).then(res=>{
						if(res.list.err == 0){
							//uni.setStorageSync('token', res.token);
							this.$store.commit('PUBLICLOGIN', res);
							this.$utils.switchTab('/index/index');
						}else{
							uni.showToast({
								title: res.list.msg,
								icon:'none'
							})
						}
					}).catch(err=>{
						uni.showToast({
							title: err.msg,
							icon:'none'
						})
					});
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.login-title{
	margin-top:200rpx;
}
.login-content{
	padding:70rpx;
	/deep/ .uni-input-input{
		font-size:36rpx;
	}
}
</style> 